<template>
  <div class="dashboard-container" style="width: 100%;padding:0;margin:0;">
    <!-- 顶部标题栏 -->
    <el-row class="header-row">
      <el-col :span="24" class="header-content">
        <h1>统计</h1>
        <div class="header-info">
          <ElDatePicker placeholder="选择日期"></ElDatePicker>
        </div>
      </el-col>
    </el-row>

    <!-- 指标卡片 -->

    <!-- 生活 -->
    <h1 class="font-bold ml-2.5 text-purple-500" style="font-size:1.5rem"><i class="el-icon-s-home"></i> 生活</h1>
    <!--概况-->
    <el-row :gutter="8" class="kpi-row">
      <el-col :span="4" v-for="(item, index) in LiveCardList" :key="index" class="kpi-card">

        <el-card :body-style="{ padding: '15px' }" style="margin-top: 1rem">
          <div class="kpi-title">{{ item.name }}</div>
          <div class="kpi-value" :title="item.origin_value">

            {{ item.value }}
          </div>
          <div class="kpi-trend" v-if="item.trend" :class="{ up: item.trend > 0, down: item.trend < 0 }">
            <i :class="item.trend > 0 ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            {{ Math.abs(item.trend) }}%
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" class="chart-row" style="margin-top: 1rem">
      <el-col :span="8" class="chart-card" style="height: 500px">
        <el-card :body-style="{ padding: '15px' }">
          <div slot="header" class="chart-header">
            <span><i class="fa fa-pie-chart"></i> 支出结构</span>
          </div>
          <div style="height: 400px">

          </div>
        </el-card>
      </el-col>
      <!-- 收入结构 -->
      <el-col :span="16" class="chart-card" style=" height: 500px">
        <el-card :body-style="{ padding: '15px' }">
          <div slot="header" class="chart-header">
            <span><i class="fa fa-pie-chart"></i> 收入结构</span>
          </div>
          <div class="chart-container">
            <div ref="achievementChart" class="chart">
              <div class="flex" style="height: 400px">
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
// import axios from 'axios'

export default {
  computed: {},
  components: {},
  name: 'IndexView',
  data() {
    return {
      LiveCardList: [
        {name: "现金资产", value: "100万"},
        {name: "累计收入", value: "100万"},
        {name: "累计支出", value: "100万"},
        {name: "日志数", value: "30"},
        {name: "累计运动天数", value: "365"},
      ],
      ExpenseTable: [],
    }
  },
  created() {
  },
  mounted() {

  },
  beforeDestroy() {
  },
  methods: {
    // 日报弹窗的开关显示
    showReportModal() {
      this.show_report_modal = !this.show_report_modal
    },
    // 格式化数据
    formatData(value) {
      // 处理超过万的数值，保留两位小数并显示为“x.xx万”
      if (value >= 10000) {
        return (value / 10000).toFixed(2) + '万';
      } else if (value > 1) {
        return value.toFixed(2)
      }
      // 处理小数（这里假设小于1的数值是比例值，需要转成百分比）
      else if (value > 0 && value < 1) {
        return (value * 100).toFixed(2) + '%';
      }
      // 其他情况（如整数、不符合上述条件的小数等），直接返回原值
      else {
        return value
      }
    },


  },
  watch: {}


}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #f9f9f9;
  min-height: 100vh;
}

.header-row {
  margin-bottom: 20px;
}

.header-content {
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h1 {
  margin: 0;
  font-size: 24px;
  color: #333;
  font-weight: 600;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.update-time {
  color: #666;
  font-size: 14px;
}

.kpi-row {
  margin-bottom: 20px;
}

.kpi-card {
  height: 100%;
}

.kpi-card .el-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.kpi-card .el-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.kpi-title {
  color: #666;
  font-size: 14px;
  margin-bottom: 10px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.kpi-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-trend.up {
  color: #e74c3c;

}

.kpi-trend.down {
  color: #42b983;

}

.chart-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
}

.chart-card .el-card {
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
}

.chart-container {
  width: 100%;
  height: calc(100% - 44px);
  min-height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .kpi-card {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .chart-card {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .kpi-card {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .chart-card {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-info {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .kpi-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.is-selected {
  color: #1989FA;
}
</style>
